<template>
  <div>
    <el-table
      class="tableData"
      :data="tableDataFn"
      highlight-current-row
      border
      stripe
      style="width: 100%"
      :fit="true"
    >
      <el-table-column type="index" :index="1" width="50" label="序号" fixed="left">
      </el-table-column>

      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :sortable="item.sortable"
          align="center"
          v-if="item.isShow"
          :key="item.prop"
          :fixed="item.fixed"
        >
          <template v-slot="scope">
            <template v-if="item.format == 'ISENABLED'">
              <div>
                <template v-if="scope.row[item.prop] == 'Y'">
                  <el-tag type="success">监控中</el-tag>
                </template>
                <template v-else-if="scope.row[item.prop] == 'N'">
                  <el-tag type="danger">待开启</el-tag>
                </template>
                <template v-else>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row[item.prop]"
                    placement="right"
                  >
                    <el-tag type="danger" effect="dark">异常值</el-tag>
                  </el-tooltip>
                </template>
              </div>
            </template>
            <template v-else-if="item.format == 'password'">
              <div>
                {{ scope.row["showPswd"] ? scope.row[item.prop] : "******" }}
                <i
                  class="el-icon-view pswdBtn"
                  @click="showPswdFn(scope.$index, scope.row)"
                ></i>
              </div>
            </template>
            <template v-else-if="item.format == 'alertLevelConfig'">
              <div>
                {{ alertLevelConfigOptionText(scope.row[item.prop]) }}
              </div>
            </template>
            <template v-else>
              <div>
                {{ scope.row[item.prop] }}
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
import tableColumns from "./NodeDBColumns.js";
import moment from "moment";
import { submitAdmin } from "@/api/index.js";
export default {
  props: ["tableData"],
  computed: {
    tableDataFn() {
      return this.tableData.filter((item) => {
        item["createdate"] = moment(item["createdate"]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        return item;
      });
    },
  },
  data() {
    return {
      tableColumns: tableColumns,
      alertLevelConfigOption: [],
    };
  },
  created(){
      let _postData = {
        opera: "GetAlertGroupIndex",
        curPage: 1,
        pageSize: 10000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "exactquery", // 精确查询
        filters: {},
      };

      submitAdmin({
        postData: JSON.stringify(_postData),
      }).then((res) => {
        this.alertLevelConfigOption = res.data;
      });
  },
  methods: {
    showPswdFn(index, row) {
      row["showPswd"] = !row["showPswd"];
      // 更新数据
      this.$set(this.tableDataFn, index, row);
    },
    alertLevelConfigOptionText(id) {
      let _text = "";
      this.alertLevelConfigOption.forEach((element) => {
        if (element.ID == id) {
          _text = element.TITLE;
        }
      });

      return _text;
    },
  },
};
</script>